<template>
  <page-header title="地址管理" background="#F7F0E6"></page-header>
  <address-skeleton v-if="loading"></address-skeleton>
  <view class="page-address-list" v-else>
    <view class="list-box">
      <block v-for="(addressItem, addressIndex) in addressList" :key="addressIndex">
        <view :class="['item', addressItem.isDefault === 1 ? 'default-address' : '']" @tap="back(addressItem.addrId)">
          <view class="text-box">
            <view class="address">
              <view v-if="addressItem.isDefault === 1" class="default-flag">
                默认
              </view>
              {{ addressItem.province + addressItem.city + addressItem.area + addressItem.addr }}
            </view>
            <view class="name-phone">
              <view class="name">
                {{ addressItem.consignee }}
              </view>
              <view class="phone">
                {{ addressItem.mobile }}
              </view>
            </view>
          </view>
          <view class="edit-icon" @tap.stop="toEditAddress(addressItem.addrId)">
            <image src="/static/images/edit.png" />
          </view>
        </view>
      </block>
      <empty-img v-if="notLogin || addressList.length === 0">
        <template #text>
          地址空空的，去添加新地址吧~
        </template>
        <template #img>
          <image src="../../static/empty-img/address.png" mode="aspectFit"></image>
        </template>
      </empty-img>
    </view>
    <view class="new-address">
      <view class="btn" @tap="addAddress">
        新建收货地址
      </view>
    </view>
  </view>
</template>

<script setup>
  import {
    reactive,
    ref
  } from 'vue'

  const Data = reactive({
    addressList: []
  })
  const {
    addressList
  } = toRefs(Data)
  const notLogin = ref(false)
  const link = ref(false)
  const orderEntry = ref('')
  const loading = ref(true)
  onShow(() => {
    getAddressList()
  })
  onLoad((options) => {
    if (options.link) {
      link.value = options.link
    }
  })
  /**
   * 获取用户地址列表
   */
  const getAddressList = () => {
    const params = {
      url: '/mall4cloud_user/user_addr/list',
      method: 'GET',
      data: {}
    }
    http.request(params).then((res) => {
      Data.addressList = res
      notLogin.value = false
    }).catch(() => {
      notLogin.value = true
    }).finally(() => {
      loading.value = false
    })
  }

  // 去编辑地址
  const toEditAddress = (addrId) => {
    uni.navigateTo({
      url: '/pages/address-edit/address-edit?addrId=' + addrId
    })
  }

  /**
   * 新建地址
   */
  const addAddress = () => {
    if (Data.addressList.length === 10) {
      uni.showToast({
        title: $t('addNewAddressTips'),
        icon: 'none'
      })
    } else {
      uni.navigateTo({
        url: '/pages/address-edit/address-edit'
      })
    }
  }

  // 跳转linkURL
  const back = (addrId) => {
    if (link.value) {
      uni.setStorageSync("cloudAddress", addrId)
      uni.navigateBack()
    }
  }
</script>

<style lang="scss" scoped>
  .page-address-list {
    padding-bottom: env(safe-area-inset-bottom);

    .list-box {
      padding-bottom: 120rpx;
    }

    .list-box .item {
      display: flex;
      margin: 30rpx;
      position: relative;
      background: #fff;
      box-sizing: border-box;
      padding: 30rpx;
      border-radius: 35rpx;
      box-shadow: 6px 8px 10px -4px #f8ede2;
    }

    .list-box .item::after {
      position: absolute;
      bottom: 0;
      left: 30rpx;
      right: 30rpx;
      display: block;
      height: 2rpx;
      content: " ";
      font-size: 0;
      background: #f9f9f9;
    }

    .list-box .item .text-box {
      flex: 1;
      margin-right: 20rpx;
    }

    .list-box .item .text-box .address {
      line-height: 36rpx;
      font-weight: 600;
      font-size: 26rpx;
    }

    .list-box .item .text-box .address .default-flag {
      padding: 0 6rpx;
      background: #FDE9CE;
      border-radius: 4rpx;
      color: #5b4523;
      font-size: 18rpx;
      margin-right: 10rpx;
      display: inline-block;
      height: 24rpx;
      line-height: 24rpx;
      vertical-align: top;
      margin-top: 6rpx;
    }

    .list-box .item .text-box .name-phone {
      display: flex;
      align-items: center;
      margin-top: 10rpx;
      color: #999;
    }

    .list-box .item .text-box .name-phone .name {
      margin-right: 20rpx;
    }

    .list-box .item .edit-icon {
      font-size: 0;
      width: 24rpx;
      height: 24rpx;
      margin-top: 6rpx;
    }

    .new-address {
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      padding: 20rpx 30rpx;
      height: 70rpx;
      line-height: 70rpx;

      .btn {
        font-size: 26rpx;
        font-weight: 600;
        text-align: center;
        background: #FDE9CE;
        color: #5b4523;
        border-radius: 70rpx;
      }
    }
  }
</style>

<style>
  page {
    background: #FFFAF4;
  }
</style>
